<template>
  <!-- 登录页 -->
  <div class="login-box flex">
    <div class="login-content flex">
      <el-form :model="formData" ref="formCtx">
        <div class="label">账号</div>
        <el-form-item
          label=""
          :rules="[{ required: true, message: '请输入账号' }]"
          prop="account"
        >
          <el-input v-model="formData.account" placeholder="请输入账号" />
        </el-form-item>
        <div class="label">密码</div>
        <el-form-item
          label=""
          :rules="[{ required: true, message: '请输入密码' }]"
          prop="password"
        >
          <el-input
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-checkbox v-model="formData.remember" label="记住密码" />
        <div class="flex">
          <el-button @click="login" class="login-btn" type="primary"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

onMounted(async () => {
  setUserAccount();
});

let formData = $ref({
  account: "",
  password: "",
  remember: false,
});
let formCtx = $ref(null);
function login() {
  formCtx.validate((valid) => {
    if (valid) {
      if (formData.remember) {
        $common.setlocalStorage("account", formData);
      } else {
        $common.setlocalStorage("account", "");
      }
      $common.setlocalStorage("userData", 123);

      $router.replace("/redirectPage");
    } else {
      $global.openNotice("请填写所有必填项", "error");
    }
  });
}

function setUserAccount() {
  let account = $common.checklocalStorage("account");
  if (account) {
    formData = account;
  }
}
</script>
<style lang="scss" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  // background-color: var(--theme-color);
  // background-image: url("@/assets/image/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgb(252, 100, 125);
  .login-content {
    width: 500px;
    height: 450px;
    padding: 20px 60px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    .label {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
      user-select: none;
    }
    .login-btn {
      width: 100%;
      margin-top: 40px;
      height: 40px;
      border-radius: 8px;
    }
  }
}
</style>
